<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/policylaw/list' }">
          政策法规
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content">
      <el-card class="box-card">
        <div v-for="o in 1" :key="o" class="text item">
          <el-table class="bidTable" :data="policyLawList" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column label="标题">
              <template #default="scope">
                <div class="table-row-title">
                  <span>{{ scope.row.title }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="发布时间" width="200">
              <template #default="scope">
                <span>
                  {{ parseTime(scope.row.publishDatetime, "{y}-{m}-{d}") }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template #default="scope">
                <el-button class="detail-button" size="small" @click="handerTableRow(scope.row.id)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pageinfor bidPagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="listQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog v-model="dialogModelFile" title="模型文件" width="1000" :before-close="handleClose">
      <template #footer>
        <div id="modelFile" class="dialog-footer"></div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { listPolicylaw } from "@/api/bid/policylaw";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

let policyLawList = reactive([]);
const total = ref(0);
const dialogModelFile = ref(false);
const listQuery = reactive({
  pageSize: "10",
  pageNum: "1",
});
const router = useRouter();

function getList() {
  listPolicylaw(listQuery).then((res) => {
    policyLawList = res.rows;
    total.value = res.total;
  });
}

function handleSizeChange(val) {
  listQuery.pageSize = val;
  getList();
}

function handleCurrentChange(val) {
  listQuery.pageNum = val;
  getList();
}

function handerTableRow(id) {
  router.push(`/policylaw/detail?id=${id}`);
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.bread {
    display: flex;
    line-height: 20px;
    padding: 10px 20px 20px;
}

.content {
  display: block;
  padding: 20px;
  background-color: #f7f9fb;
}

.box-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.table-row-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #333;
}

.detail-button {
  background: linear-gradient(45deg, #16a085, #2ecc71);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}

.detail-button:hover {
  background: linear-gradient(45deg, #1abc9c, #27ae60);
}

.pageinfor {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}

.el-pagination {
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 767px) {
  .bread {
    font-size: 14px;
    padding: 10px;
  }

  .content {
    padding: 10px;
  }
}
</style>
